﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>${systemName }</title>
    <jsp:include page="/WEB-INF/view/commons/css.jsp" />
</head>

<body class="no-skin">

<div id="navbar" class="navbar navbar-default ace-save-state">

    <!-- 顶部 -->
    <div class="navbar-container ace-save-state" id="navbar-container">
        <button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
            <span class="sr-only">Toggle sidebar</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>
        </button>

        <div class="navbar-header pull-left">
            <a href="index/home" class="navbar-brand">
                ${systemName }
            </a>
        </div>

        <div class="navbar-buttons navbar-header pull-right" role="navigation">
            <ul class="nav ace-nav">
                <li class="light-blue dropdown-modal">
                    <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                        <img class="nav-user-photo" src="static/plugin/ace/image/user.jpg" alt="Jason's Photo" />
                        <span class="user-info">
                            <small>Welcome,</small>
                            <shiro:principal property="userName"></shiro:principal>
                        </span>
                        <i class="ace-icon fa fa-caret-down"></i>
                    </a>

                    <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
                    <%--<li class="divider"></li>--%>
                        <li>
                            <a href="javascript:void();" onclick = "changPwd()" >
                                <i class="ace-icon fa fa-cog"></i>
                                修改密码
                            </a>
                        </li>
                        <li>
                            <a href="javascript:logout();" >
                                <i class="ace-icon fa fa-power-off"></i>
                                退出
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
            <%--<ul class="nav ace-nav">--%>
                <%--<li class="grey dropdown-modal">--%>
                    <%--<a data-toggle="dropdown" class="dropdown-toggle" href="#">--%>
                        <%--<i class="ace-icon fa fa-tasks"></i>--%>
                        <%--<span class="badge badge-grey">4</span>--%>
                    <%--</a>--%>

                    <%--<ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">--%>
                        <%--<li class="dropdown-header">--%>
                            <%--<i class="ace-icon fa fa-check"></i>--%>
                            <%--4 Tasks to complete--%>
                        <%--</li>--%>

                        <%--<li class="dropdown-content">--%>
                            <%--<ul class="dropdown-menu dropdown-navbar">--%>
                                <%--<li>--%>
                                    <%--<a href="#">--%>
                                        <%--<div class="clearfix">--%>
                                            <%--<span class="pull-left">Software Update</span>--%>
                                            <%--<span class="pull-right">65%</span>--%>
                                        <%--</div>--%>

                                        <%--<div class="progress progress-mini">--%>
                                            <%--<div style="width:65%" class="progress-bar"></div>--%>
                                        <%--</div>--%>
                                    <%--</a>--%>
                                <%--</li>--%>

                                <%--<li>--%>
                                    <%--<a href="#">--%>
                                        <%--<div class="clearfix">--%>
                                            <%--<span class="pull-left">Hardware Upgrade</span>--%>
                                            <%--<span class="pull-right">35%</span>--%>
                                        <%--</div>--%>

                                        <%--<div class="progress progress-mini">--%>
                                            <%--<div style="width:35%" class="progress-bar progress-bar-danger"></div>--%>
                                        <%--</div>--%>
                                    <%--</a>--%>
                                <%--</li>--%>

                                <%--<li>--%>
                                    <%--<a href="#">--%>
                                        <%--<div class="clearfix">--%>
                                            <%--<span class="pull-left">Unit Testing</span>--%>
                                            <%--<span class="pull-right">15%</span>--%>
                                        <%--</div>--%>

                                        <%--<div class="progress progress-mini">--%>
                                            <%--<div style="width:15%" class="progress-bar progress-bar-warning"></div>--%>
                                        <%--</div>--%>
                                    <%--</a>--%>
                                <%--</li>--%>

                                <%--<li>--%>
                                    <%--<a href="#">--%>
                                        <%--<div class="clearfix">--%>
                                            <%--<span class="pull-left">Bug Fixes</span>--%>
                                            <%--<span class="pull-right">90%</span>--%>
                                        <%--</div>--%>

                                        <%--<div class="progress progress-mini progress-striped active">--%>
                                            <%--<div style="width:90%" class="progress-bar progress-bar-success"></div>--%>
                                        <%--</div>--%>
                                    <%--</a>--%>
                                <%--</li>--%>
                            <%--</ul>--%>
                        <%--</li>--%>

                        <%--<li class="dropdown-footer">--%>
                            <%--<a href="#">--%>
                                <%--See tasks with details--%>
                                <%--<i class="ace-icon fa fa-arrow-right"></i>--%>
                            <%--</a>--%>
                        <%--</li>--%>
                    <%--</ul>--%>
                <%--</li>--%>

                <%--<li class="purple dropdown-modal">--%>
                    <%--<a data-toggle="dropdown" class="dropdown-toggle" href="#">--%>
                        <%--<i class="ace-icon fa fa-bell icon-animated-bell"></i>--%>
                        <%--<span class="badge badge-important">8</span>--%>
                    <%--</a>--%>

                    <%--<ul class="dropdown-menu-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-close">--%>
                        <%--<li class="dropdown-header">--%>
                            <%--<i class="ace-icon fa fa-exclamation-triangle"></i>--%>
                            <%--8 Notifications--%>
                        <%--</li>--%>

                        <%--<li class="dropdown-content">--%>
                            <%--<ul class="dropdown-menu dropdown-navbar navbar-pink">--%>
                                <%--<li>--%>
                                    <%--<a href="#">--%>
                                        <%--<div class="clearfix">--%>
                                                        <%--<span class="pull-left">--%>
                                                            <%--<i class="btn btn-xs no-hover btn-pink fa fa-comment"></i>--%>
                                                            <%--New Comments--%>
                                                        <%--</span>--%>
                                            <%--<span class="pull-right badge badge-info">+12</span>--%>
                                        <%--</div>--%>
                                    <%--</a>--%>
                                <%--</li>--%>

                                <%--<li>--%>
                                    <%--<a href="#">--%>
                                        <%--<i class="btn btn-xs btn-primary fa fa-user"></i>--%>
                                        <%--Bob just signed up as an editor ...--%>
                                    <%--</a>--%>
                                <%--</li>--%>

                                <%--<li>--%>
                                    <%--<a href="#">--%>
                                        <%--<div class="clearfix">--%>
                                                        <%--<span class="pull-left">--%>
                                                            <%--<i class="btn btn-xs no-hover btn-success fa fa-shopping-cart"></i>--%>
                                                            <%--New Orders--%>
                                                        <%--</span>--%>
                                            <%--<span class="pull-right badge badge-success">+8</span>--%>
                                        <%--</div>--%>
                                    <%--</a>--%>
                                <%--</li>--%>

                                <%--<li>--%>
                                    <%--<a href="#">--%>
                                        <%--<div class="clearfix">--%>
                                                        <%--<span class="pull-left">--%>
                                                            <%--<i class="btn btn-xs no-hover btn-info fa fa-twitter"></i>--%>
                                                            <%--Followers--%>
                                                        <%--</span>--%>
                                            <%--<span class="pull-right badge badge-info">+11</span>--%>
                                        <%--</div>--%>
                                    <%--</a>--%>
                                <%--</li>--%>
                            <%--</ul>--%>
                        <%--</li>--%>

                        <%--<li class="dropdown-footer">--%>
                            <%--<a href="#">--%>
                                <%--See all notifications--%>
                                <%--<i class="ace-icon fa fa-arrow-right"></i>--%>
                            <%--</a>--%>
                        <%--</li>--%>
                    <%--</ul>--%>
                <%--</li>--%>

                <%--<li class="green dropdown-modal">--%>
                    <%--<a data-toggle="dropdown" class="dropdown-toggle" href="#">--%>
                        <%--<i class="ace-icon fa fa-envelope icon-animated-vertical"></i>--%>
                        <%--<span class="badge badge-success">5</span>--%>
                    <%--</a>--%>

                    <%--<ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">--%>
                        <%--<li class="dropdown-header">--%>
                            <%--<i class="ace-icon fa fa-envelope-o"></i>--%>
                            <%--5 Messages--%>
                        <%--</li>--%>

                        <%--<li class="dropdown-content">--%>
                            <%--<ul class="dropdown-menu dropdown-navbar">--%>
                                <%--<li>--%>
                                    <%--<a href="#" class="clearfix">--%>
                                        <%--<img src="static/plugin/ace/image/avatar.png" class="msg-photo" alt="Alex's Avatar" />--%>
                                        <%--<span class="msg-body">--%>
                                                        <%--<span class="msg-title">--%>
                                                            <%--<span class="blue">Alex:</span>--%>
                                                            <%--Ciao sociis natoque penatibus et auctor ...--%>
                                                        <%--</span>--%>

                                                        <%--<span class="msg-time">--%>
                                                            <%--<i class="ace-icon fa fa-clock-o"></i>--%>
                                                            <%--<span>a moment ago</span>--%>
                                                        <%--</span>--%>
                                                    <%--</span>--%>
                                    <%--</a>--%>
                                <%--</li>--%>

                                <%--<li>--%>
                                    <%--<a href="#" class="clearfix">--%>
                                        <%--<img src="static/plugin/ace/image/avatar3.png" class="msg-photo" alt="Susan's Avatar" />--%>
                                        <%--<span class="msg-body">--%>
                                                        <%--<span class="msg-title">--%>
                                                            <%--<span class="blue">Susan:</span>--%>
                                                            <%--Vestibulum id ligula porta felis euismod ...--%>
                                                        <%--</span>--%>

                                                        <%--<span class="msg-time">--%>
                                                            <%--<i class="ace-icon fa fa-clock-o"></i>--%>
                                                            <%--<span>20 minutes ago</span>--%>
                                                        <%--</span>--%>
                                                    <%--</span>--%>
                                    <%--</a>--%>
                                <%--</li>--%>

                                <%--<li>--%>
                                    <%--<a href="#" class="clearfix">--%>
                                        <%--<img src="static/plugin/ace/image/avatar4.png" class="msg-photo" alt="Bob's Avatar" />--%>
                                        <%--<span class="msg-body">--%>
                                                        <%--<span class="msg-title">--%>
                                                            <%--<span class="blue">Bob:</span>--%>
                                                            <%--Nullam quis risus eget urna mollis ornare ...--%>
                                                        <%--</span>--%>

                                                        <%--<span class="msg-time">--%>
                                                            <%--<i class="ace-icon fa fa-clock-o"></i>--%>
                                                            <%--<span>3:15 pm</span>--%>
                                                        <%--</span>--%>
                                                    <%--</span>--%>
                                    <%--</a>--%>
                                <%--</li>--%>

                                <%--<li>--%>
                                    <%--<a href="#" class="clearfix">--%>
                                        <%--<img src="static/plugin/ace/image/avatar2.png" class="msg-photo" alt="Kate's Avatar" />--%>
                                        <%--<span class="msg-body">--%>
                                                        <%--<span class="msg-title">--%>
                                                            <%--<span class="blue">Kate:</span>--%>
                                                            <%--Ciao sociis natoque eget urna mollis ornare ...--%>
                                                        <%--</span>--%>

                                                        <%--<span class="msg-time">--%>
                                                            <%--<i class="ace-icon fa fa-clock-o"></i>--%>
                                                            <%--<span>1:33 pm</span>--%>
                                                        <%--</span>--%>
                                                    <%--</span>--%>
                                    <%--</a>--%>
                                <%--</li>--%>

                                <%--<li>--%>
                                    <%--<a href="#" class="clearfix">--%>
                                        <%--<img src="static/plugin/ace/image/avatar5.png" class="msg-photo" alt="Fred's Avatar" />--%>
                                        <%--<span class="msg-body">--%>
                                                        <%--<span class="msg-title">--%>
                                                            <%--<span class="blue">Fred:</span>--%>
                                                            <%--Vestibulum id penatibus et auctor  ...--%>
                                                        <%--</span>--%>

                                                        <%--<span class="msg-time">--%>
                                                            <%--<i class="ace-icon fa fa-clock-o"></i>--%>
                                                            <%--<span>10:09 am</span>--%>
                                                        <%--</span>--%>
                                                    <%--</span>--%>
                                    <%--</a>--%>
                                <%--</li>--%>
                            <%--</ul>--%>
                        <%--</li>--%>

                        <%--<li class="dropdown-footer">--%>
                            <%--<a href="inbox.html">--%>
                                <%--See all messages--%>
                                <%--<i class="ace-icon fa fa-arrow-right"></i>--%>
                            <%--</a>--%>
                        <%--</li>--%>
                    <%--</ul>--%>
                <%--</li>--%>

                <%--<li class="light-blue dropdown-modal">--%>
                    <%--<a data-toggle="dropdown" href="#" class="dropdown-toggle">--%>
                        <%--<img class="nav-user-photo" src="static/plugin/ace/image/user.jpg" alt="Jason's Photo" />--%>
                        <%--<span class="user-info">--%>
                            <%--<small>Welcome,</small>--%>
                            <%--<shiro:principal property="userName"></shiro:principal>--%>
                        <%--</span>--%>
                        <%--<i class="ace-icon fa fa-caret-down"></i>--%>
                    <%--</a>--%>

                    <%--<ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">--%>
                        <%--&lt;%&ndash;<li class="divider"></li>&ndash;%&gt;--%>
                        <%--<li>--%>
                            <%--<a href="javascript:void();" onclick = "changPwd()" >--%>
                                <%--<i class="ace-icon fa fa-cog"></i>--%>
                                <%--修改密码--%>
                            <%--</a>--%>
                        <%--</li>--%>
                        <%--<li>--%>
                            <%--<a href="javascript:logout();" >--%>
                                <%--<i class="ace-icon fa fa-power-off"></i>--%>
                                <%--退出--%>
                            <%--</a>--%>
                        <%--</li>--%>
                    <%--</ul>--%>
                <%--</li>--%>
            <%--</ul>--%>
        </div>
    </div><!-- /.navbar-container -->
</div>

<div class="main-container ace-save-state home-container" id="main-container">
    <script type="text/javascript">
        try{ace.settings.loadState('main-container')}catch(e){}
    </script>

    <div id="sidebar" class="sidebar responsive ace-save-state">
        <script type="text/javascript">
            try{ace.settings.loadState('sidebar')}catch(e){}
        </script>

        <%--<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">--%>
            <%--<i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>--%>
        <%--</div>--%>

        <%--<div class="sidebar-shortcuts" id="sidebar-shortcuts">--%>
            <%--<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">--%>
                <%--<button class="btn btn-success">--%>
                    <%--<i class="ace-icon fa fa-signal"></i>--%>
                <%--</button>--%>

                <%--<button class="btn btn-info">--%>
                    <%--<i class="ace-icon fa fa-pencil"></i>--%>
                <%--</button>--%>

                <%--<button class="btn btn-warning">--%>
                    <%--<i class="ace-icon fa fa-users"></i>--%>
                <%--</button>--%>

                <%--<button class="btn btn-danger">--%>
                    <%--<i class="ace-icon fa fa-cogs"></i>--%>
                <%--</button>--%>
            <%--</div>--%>

            <%--<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">--%>
                <%--<span class="btn btn-success"></span>--%>

                <%--<span class="btn btn-info"></span>--%>

                <%--<span class="btn btn-warning"></span>--%>

                <%--<span class="btn btn-danger"></span>--%>
            <%--</div>--%>
        <%--</div><!-- /.sidebar-shortcuts -->--%>

        <ul class="nav nav-list">
            <c:forEach items="${menuList}" var="menu" varStatus="s">
            <c:if test="${menu.permissionLevel eq '1' }">
            <li id="lm${menu.id }">
                <a class="dropdown-toggle" href="javascript:void(0);" >
                    <%--<i class="${menu.icon == null ? 'menu-icon fa fa-bars' : menu.icon}"></i>--%>
                    <span class="menu-text">${menu.permissionName }</span>
                    <b class="arrow fa fa-angle-down"></b>
                </a>
                <b class="arrow"></b>
                <ul class="submenu">
                    <c:forEach items="${menu.child }" var="menu2">
                        <c:choose>
                            <c:when test="${not empty menu2.child}">
                                <li id="lm${menu2.id }">
                                    <a class="dropdown-toggle" href="javascript:void(0);" >
                                        <i class="menu-icon fa fa-caret-right"></i>
                                        <span class="menu-text">${menu2.permissionName }</span>
                                        <b class="arrow fa fa-angle-down"></b>
                                    </a>
                                    <b class="arrow"></b>
                                    <ul class="submenu">
                                        <c:forEach items="${menu2.child }" var="menu3">
                                        <li id="z${menu3.id }">
                                            <a href="javascript:void(0);" class="menu-item" data-url="${menu3.action }" data-menu-id="${menu3.id }" >
                                                <i class="menu-icon fa fa-caret-right"></i>
                                                ${menu3.permissionName }
                                            </a>
                                        </li>
                                        </c:forEach>
                                    </ul>
                                </li>
                            </c:when>
                            <c:otherwise>
                                <li id="z${menu2.id }">
                                    <a href="javascript:void(0);" class="menu-item" data-url="${menu2.action }" data-menu-id="${menu2.id }" >
                                        <i class="menu-icon fa fa-caret-right"></i>
                                            ${menu2.permissionName }
                                    </a>
                                </li>
                            </c:otherwise>
                        </c:choose>
                    </c:forEach>
                </ul>
                </c:if>
            </li>
            </c:forEach>
        </ul><!--/.nav-list-->


    </div>

    <div class="main-content">
        <iframe style="width: 100%;min-height: 500px;" src="index/default" frameborder="0" id="mainFrame">
        </iframe>
    </div>

</div><!-- /.main-container -->

<!-- basic scripts -->
<jsp:include page="/WEB-INF/view/commons/js.jsp" />
<script type="text/javascript" src="static/js/portal/home.js" ></script>
<!-- inline scripts related to this page -->
<script type="text/javascript">
    jQuery(function($) {

        //iframe高度自适应
        $(window).on('resize', function(){
            setIframeHeight();

        });
        function setIframeHeight(){
            var mainHeight = $(window).height() - $('#navbar').height()-10;
            $('#mainFrame').height(mainHeight);
        }
        setIframeHeight();

        //菜单点击事件处理
        $('.nav-list .menu-item').on('click', function(){
            var _this = $(this);
            var url = _this.data('url');
            var menuId = _this.data('menuId');
            var frame = _this.data('target') ? _this.data('target') : 'mainFrame';
//            console.log('menu:', menuId, url, frame);
            $('.nav-list li').removeClass('active');
            _this.closest('li').addClass('active');
            $('#'+frame).attr('src', url);
        });
    });
    function loading(msg){
        layer.closeAll('loading');
        layer.load(0,{content:msg,shade:0.3});
    }
    function loaded(){
        layer.closeAll('loading');
    }
    
    function changPwd(){
    		var layerIndex = layer.open({
                title: "修改密码",
                type: 2,
                content: "/sysuser/goPwd",
                area: ['390px', '330px']
            });
    	}
    	
</script>
</body>
</html>
